<template>
  <div
    class="four-new-technology-container animate__faster animate__animated animate__fadeIn"
  >
    <!-- 顶部条件筛选 -->
    <div class="screen-conditions-container">
      <ScreenConditions :isDataType="false">
        <template slot="conditions">
          <AssociativeSelectGroup
            :map="selectMap"
            v-model="defaultTime"
            :activeDate="activeDate"
            @conditionChange="selectGroupChange($event)"
          >
            <template slot="space_0">
              <a-input
                placeholder="请输入报告编号"
                v-model="select.reportNum"
              />
              <!-- 处理状态 -->
              <bjSelect
                v-model="selectDealStatus"
                :allowClear="true"
                placeholder="请选择状态"
                :dataResource="dealStatusList"
                :replaceFields="replaceFields"
                @change="dealStatusChange"
              ></bjSelect>
            </template>
          </AssociativeSelectGroup>
        </template>
        <template slot="operate">
          <a-button type="primary" @click="getTableData"> 查询 </a-button>
        </template>
      </ScreenConditions>
    </div>
    <div
      class="four-new-technology-body animate__faster animate__animated animate__fadeIn"
      v-loading="loading"
    >
      <!-- <div class="zhgd-data-report-header" header="预警管理"></div> -->
      <div class="table-warp-body">
        <div class="table-body">
          <vxe-table
            height="99%"
            class="scrollbarStyle"
            align="center"
            :data="tableData"
            :column-config="{ resizable: true }"
          >
            <vxe-column type="seq" width="80" title="序号"></vxe-column>
            <vxe-column
              field="trialDate"
              title="检测时间"
              min-width="150"
            ></vxe-column>
            <vxe-column
              field="trialName"
              title="试验项目"
              min-width="150"
            ></vxe-column>
            <vxe-column
              field="standardValue"
              title="技术指标"
              min-width="150"
            ></vxe-column>
            <vxe-column
              field="testValue"
              title="实测结果"
              min-width="150"
            ></vxe-column>
            <vxe-column field="result" title="结果判定" min-width="150">
              <template #default="{ row }">
                <div class="result result-ok" v-if="row.result == 0">合格</div>
                <div class="result result-no" v-if="row.result == 1">
                  不合格
                </div>
                <div class="result result-invalid" v-if="row.result == 2">
                  试验数据无效
                </div>
                <div class="result" v-if="row.result == -1">实测</div>
              </template>
            </vxe-column>
            <vxe-column field="dealStatus" title="状态" min-width="150">
              <template #default="{ row }">
                <div class="status" v-if="row.dealStatus == 0">未处理</div>
                <div class="status status-ok" v-if="row.dealStatus == 1">
                  已处理
                </div>
                <div class="status status-close" v-if="row.dealStatus == 2">
                  已闭合
                </div>
              </template>
            </vxe-column>
            <vxe-column field="operate" width="160" title="操作" fixed="right">
              <template #default="{ row }">
                <div class="text-button-group">
                  <a-button type="link" @click="detail(row)">查看</a-button>
                  <a-button
                    type="link"
                    v-if="row.dealStatus == 0"
                    @click="goDetail(row, '2')"
                    >闭合</a-button
                  >
                  <a-button
                    type="link"
                    v-if="row.dealStatus == 1"
                    @click="goDetail(row, '3')"
                    >审批</a-button
                  >
                </div>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
        <vxe-pager
          background
          :current-page.sync="pager.page"
          :page-size.sync="pager.pageSize"
          :total="pager.total"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes', 'FullJump']"
          @page-change="paginationChange"
        >
          <template #left>
            <div class="vxe-pager-left-tip-container">
              第<span>1</span>到<span
                >{{ Math.ceil(pager.total / pager.pageSize) }}页 </span
              >共<span>{{ pager.total }}</span
              >条记录
            </div>
          </template>
        </vxe-pager>
      </div>
    </div>
    <!-- 操作页面 -->
    <operatePage
      :visible.sync="operatePageVisible"
      :title="operatePage.title"
      :pId="operatePage.id"
      :reId="operatePage.reportId"
      :parentNum="operatePage.parentNum"
      :trialNum="operatePage.trialNum"
    ></operatePage>
  </div>
</template>

<script>
import AssociativeSelectGroup from "@/components/wisdom-beam/trial-app/AssociativeSelectGroup";
import bjSelect from "@/components/bj-select";
import { notificationTip } from "@/utils";
import { distDataList } from "@/api/wisdom-beam/trial-app";
import { getWarnList, getTestHasDataDate } from "@/api/wisdom-beam/trial-app";
import operatePage from "./views/detail.vue";
export default {
  components: {
    AssociativeSelectGroup,
    bjSelect,
    operatePage,
  },
  data() {
    return {
      operatePageVisible: false,
      operatePage: {
        visible: false,
        title: "",
        id: "",
        reportId: "",
        trialNum: "",
        parentNum: "",
      },
      loading: false,
      defaultTime: [],
      activeDate: [],
      selectMap: [
        {
          type: "calendar",
        },
      ],
      conditionsData: {},
      select: {
        reportNum: "",
      },
      //已经选择的处理状态数据
      selectDealStatus: undefined,
      replaceFields: { key: "dicValue", label: "dicDesc" },
      dealStatusList: [],
      //已经选择的试验类型数据
      selectTrials: undefined,
      trialReplaceFields: { key: "trialNum", label: "trialName" },
      trialList: [],
      tableData: [],
      pager: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
      id: "",
    };
  },
  mounted() {
    this.distDataList();
  },
  methods: {
    //  字典项查询-处理状态、标级类别
    distDataList() {
      distDataList({
        dictType: "dealStatus",
      })
        .then((res) => {
          this.dealStatusList = res.data.result;
        })
        .catch((_) => {});
    },

    //监听处理状态切换
    dealStatusChange(value) {
      this.selectDealStatus = value;
      this.getTableData();
    },

    //删除
    handleDelClick(row) {
      let that = this;
      let { id } = row;
      const h = this.$createElement;
      this.$confirm({
        title: "您确定删除所选内容?",
        content: "删除内容后,将无法恢复。",
        okText: "确定",
        okType: "primary",
        cancelText: "取消",
        centered: true,
        icon: () =>
          h("a-icon", {
            props: {
              type: "question-circle",
              theme: "filled",
            },
            style: "color:#FB5A5A",
          }),
        onOk() {
          return new Promise((resolve, reject) => {
            deleteTechnology(id)
              .then((res) => {
                notificationTip("success", "删除成功!");
                that.getTableData();
                resolve();
              })
              .catch((_) => {
                reject();
                notificationTip("error", "删除失败!");
              });
          });
        },
        onCancel() {},
      });
    },
    //查看
    detail(row) {
      this.operatePage = {
        title: "详情",
        id: row.id,
        trialNum: row.trialNum,
        reportId: row.trialReportId,
        parentNum: row.parentNum,
      };
      this.operatePageVisible = true;
    },

    goDetail(record, i) {
      let title = "";
      if (i == 1) {
        title = "详情";
      } else if (i == 2) {
        title = "处理";
      } else if (i == 3) {
        title = "闭合";
      }
      this.operatePage = {
        title,
        id: record.id,
        reportId: record.trialReportId,
        parentNum: record.parentNum,
      };
      this.operatePageVisible = true;
    },
    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getTableData();
    },
    filterkey(data = undefined) {
      return data ? data.key : "";
    },
    //查询有数据的日期列表
    getDateList() {
      let {
        conditionsData: { block, precativeOrgCode },
        select: { reportNum },
        defaultTime,
        selectTrials,
        selectDealStatus,
      } = this;
      getTestHasDataDate({
        orgCode: block,
        precativeOrgCode,
        reportNum,
        parentNum: this.filterkey(selectTrials),
        dealStatus: this.filterkey(selectDealStatus),
        startTime: defaultTime[0] || "",
        endTime: defaultTime[1] || "",
        result: "1",
      })
        .then((res) => {
          let { data } = res;
          this.activeDate = data.result || [];
        })
        .catch((_) => {
          this.activeDate = [];
        });
    },
    getTableData() {
      this.getDateList();
      let { page, pageSize } = this.pager;
      let {
        conditionsData: { block, precativeOrgCode },
        select: { reportNum },
        defaultTime,
        selectTrials,
        selectDealStatus,
      } = this;
      getWarnList({
        orgCode: block,
        precativeOrgCode,
        reportNum,
        parentNum: this.filterkey(selectTrials),
        dealStatus: this.filterkey(selectDealStatus),
        startTime: defaultTime[0] || "",
        endTime: defaultTime[1] || "",
        page,
        pageSize,
      })
        .then((res) => {
          let {
            data: { result },
          } = res;
          this.tableData = result.records || [];
          this.pager.total = result.total;
        })
        .catch((_) => {
          this.tableData = [];
        });
    },
    selectGroupChange(data) {
      this.dealConditionsData(data);
      this.getTableData();
    },
    //处理搜索区域选中值
    dealConditionsData(data = {}) {
      Object.keys(data).forEach((key) => {
        if (!data[key]) {
          this.conditionsData[key] = "";
        } else if (Array.isArray(data[key])) {
          this.conditionsData[key] = data[key]
            .map((v) => v.key)
            .filter((v) => v)
            .toString();
        } else if (
          Object.prototype.toString.call(data[key]) === "[object Object]"
        ) {
          this.conditionsData[key] = data[key].key;
        } else {
          this.conditionsData[key] = "";
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.four-new-technology-container {
  padding: 0 0 10px 10px;
  height: 100%;
  .flex();
  flex-direction: column;
  .four-new-technology-body {
    flex: 1;
    background: #fff;
    overflow: hidden;
    margin: 10px 10px 0 0;
    .flex();
    flex-direction: column;
    .zhgd-data-report-header {
      padding: 22px 27px 22px 20px;
    }
    .table-warp-body {
      flex: 1;
      .flex();
      flex-direction: column;
      .table-body {
        flex: 1;
        .result-ok {
          color: #4bc964;
        }
        .result-no {
          color: #ff3f4a;
        }
        .result-invalid {
          color: #0098ff;
        }
        .status {
          margin: 0 auto;
          width: 60px;
          height: 26px;
          background: #ff993f;
          border-radius: 2px;
          color: #fff;
          text-align: center;
          line-height: 26px;
        }
        .status-ok {
          background: #0098ff;
        }
        .status-close {
          background: #4bc964;
        }
      }
    }
  }
}
</style>
